<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @media (min-width: 1000px) {
        .container {
            /* max-width: 540px; */
            position: absolute;
            left: 200px;
            top: 200px;
        }
        }
        @media (min-width: 100px- 300px) {
        .container {
            /* max-width: 720px; */
            position: absolute;
            left:2 0px;
            top: 20px;
        }
        }

    </style>
</head>
<body style="border: 1px solid red;">
    <div class="container" style="width: 100px; height: 100px; background: #000;">  111</div>
    
</body>
</html>
<script>
    /*
    @media only screen and (max-width: 1024px)最大宽度

    @media only screen and(min-width:800px) and (max-width:1024px)  宽度大于800 小于1024 

    @media screen and (max-device-width: 1366px) 设备屏幕宽度小于1366

    @media screen and (min-device-width: 1366px)  设备屏幕大于1366

    @media(max-width:1024px)


    /*
媒体查询 响应式
响应式适配！
@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}
*/
for(let i = 0; i<10; i++){
    console.log(i)
}
    console.log(i)
for(var i = 0; i<=10; i++){
    console.log(i)
}
    console.log(i)


</script>